<template>
        <main>
            <nut-swiper
                direction="horizontal"
                :swiperData="DetailsImg"
                ref="demo1"
                :loop=true
            >
                <div  v-for="(item,index) in dels" :key="index"  class="nut-swiper-slide" id="banner" v-touch:swipeleft="leftSlide" v-touch:swiperight="rightSlide">
                    <img :src="item.imgurl" alt="">
                </div>
               
            </nut-swiper>
            <div class="wrap">
                    <span>{{number}}</span>/{{dels.length}}
                </div>
        </main>
</template>
<script>
export default {
    name:"DetailsImg",
    data:()=>({
        DetailsImg:[],
        number:1
    }),
    props:['dels'],
    watch:{
       dels(){
           this.DetailsImg=this.dels;
       }
    },
    
directives:{
	//滑动指令
	touch:{
    bind: function (el, binding, vnode) {
      var touchType = binding.arg; //传入的模式 press swipeRight swipeLeft swipeTop swipeDowm Tap
      var timeOutEvent = 0;
      var direction = '';
      //滑动处理
      var startX, startY;
 
      //返回角度
      function GetSlideAngle(dx, dy) {
        return Math.atan2(dy, dx) * 180 / Math.PI;
      }
 
      //根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
      function GetSlideDirection(startX, startY, endX, endY) {
        var dy = startY - endY;
        var dx = endX - startX;
        var result = 0;
 
        //如果滑动距离太短
        if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return result;
        }
 
        var angle = GetSlideAngle(dx, dy);
        if (angle >= -45 && angle < 45) {
          result = 'swiperight';
        } else if (angle >= 45 && angle < 135) {
          result = 'swipeup';
        } else if (angle >= -135 && angle < -45) {
          result = 'swipedown';
        }
        else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
          result = 'swipeleft';
        }
        return result;
      }
 
      el.addEventListener('touchstart', function (ev) {
        startX = ev.touches[0].pageX;
        startY = ev.touches[0].pageY;
 
        //判断长按
        timeOutEvent = setTimeout(() =>{
          timeOutEvent = 0 ;
          if(touchType === 'press'){
              binding.value()
          }
        } , 500);
 
      }, false);
 
      el.addEventListener('touchmove' , function (ev) {
        clearTimeout(timeOutEvent)
        timeOutEvent = 0;
      });
 
      el.addEventListener('touchend', function (ev) {
        var endX, endY;
        endX = ev.changedTouches[0].pageX;
        endY = ev.changedTouches[0].pageY;
        direction = GetSlideDirection(startX, startY, endX, endY);
 
        clearTimeout(timeOutEvent)
 
        switch (direction) {
          case 0:
            break;
          case 'swipeup':
            if(touchType === 'swipeup'){
                binding.value()
            }
            break;
          case 'swipedown':
            if(touchType === 'swipedown'){
                binding.value()
            }
            break;
          case 'swipeleft':
            if(touchType === 'swipeleft'){
                binding.value()
            }
            break;
          case 'swiperight':
            if(touchType === 'swiperight'){
                binding.value()
            }
            break;
          default:
        }
  		}, false);
    },
    unbind(){
        console.log('unbind');
    }
	}
},
    methods:{
        leftSlide(){
           // console.log('左滑');
            this.number++;
            if(this.number > this.DetailsImg.length){
                this.number=1;
            }
        },
        rightSlide(){
            //console.log('右滑');
            this.number--;
            if(this.number<1){
                this.number=this.DetailsImg.length;
            }
        }
    }
}
</script>
<style scoped lang="less">
main{
    width: 23.4375rem;
    height: 23.4375rem;
    position: relative;
}
#banner{
    width: 23.4375rem;
    height: 23.4375rem;
    img{
        width: 23.4375rem;
        height: 23.4375rem;
    }
    
}
.nut-swiper{
    height: 23.4375rem;
}
.wrap{  
        font-size: .5625rem;
        height: 1.25rem;
        padding: 0rem .625rem;
        border-radius: .625rem 0 0 .625rem;
        color: #fff;
        position: absolute;
        bottom: 1rem;
        z-index: 2;
        right: 0rem;
        background:rgba(0, 0,0, .2) ;

    }
</style>
